<template>

    <div class="father">
        <div class="row">

            <div class="col-2" style="background: rgba(238, 66, 66, 0.5);">
                <div class="play playerA">
                    <div class="textA" style="padding-top: 40vh;">
                        我方聊天框
                        <div class="module-border-wrap">
                            <div class="module">
                                {{my_text}}
                            </div>
                        </div>

                    </div>

                    <div class="photoA">
                        <img :src="imgmy_src" alt="">
                    </div>
                </div>
            </div>

            <div class="col-8" style="background: rgba(79, 74, 74, 0.5);">
                <div class="play playground">
                    <GameMap/>
                </div>
            </div>

            <div class="col-2" style="background: rgba(161, 97, 97, 0.5);">
                <div class="play playerB">
                    <div class="photoB">
                        <img :src="imgop_src" alt="">
                    </div>
                    <div class="textB">
                        
                        敌方聊天框
                        <div class="module-border-wrap">
                            <div class="module">
                                {{op_text}}
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <div class="mb-3" style="text-align:center">
        <form @submit.prevent="send_text"><!--用于绑定表单提交按钮，跳转login函数，.prevent是为了阻止掉默认行为-->
            <input v-model="text_content" type="text" class="form-control" id="text_content" placeholder="请输入聊天信息">
            <button type="submit" class="btn btn-primary">提交</button>
        </form>
    </div>
</template>

<script>
import GameMap from "./GameMap.vue";
import {ref} from 'vue'
import { useStore } from 'vuex';

export default {
    components: {
        GameMap,
    },


    setup(){
        const store = useStore();

        let imgmy_src = ref("");
        let imgop_src = ref("");
        let my_text = ref("");
        let op_text = ref("");
        let text_content = ref("");

        imgop_src = store.state.pk.opponent_photo;
        imgmy_src = store.state.user.photo;
        

        const chang_optext = (text) =>{
            // console.log("text="+text)
            op_text.value = text
        }


        const send_text = () =>{
            store.state.pk.socket.send(JSON.stringify({//向链接发送json转字符串的信息
                        event: "sendText",//确定事件类型
                        msg: text_content.value,
                    }));
            my_text.value = text_content.value;
            text_content.value = "";
        }


        return {
            imgmy_src,
            imgop_src,
            text_content,
            my_text,
            op_text,
            send_text,
            chang_optext,
        }
    
    },


}
</script>

<style scoped>

    div.father{
        width: 80vw;  
        height: 80vh;	
        margin: 40px auto; 
    }

    div.photoA{
        text-align: center;
    }
    div.photoA > img {
        border-radius: 50%; 
        width: 20vh;
    }

    div.photoB{
        text-align: center;
        /* padding-top: 50vh; */
    }
    div.photoB > img {
        border-radius: 50%; 
        width: 20vh;
    }


    div.playerB > img {
        border-radius: 50%; 
        width: 20vh;
    }

    div.playground {
        width: 40vw;  
        height: 70vh;	
        margin: 30px auto; 
    }

    div.module-border-wrap {
        max-width: 250px;
        padding: 1rem;
        position: relative;
        background: linear-gradient(to right, red, purple);
        padding: 3px;
    }

    div.module {
        background: #222;
        color: white;
        padding: 2rem;
    }
    /* div.play {
        float:left;
    }
    div.playground {
        width: 40vw;  
        height: 70vh;	
        margin: 30px auto; 
    }
    div.playerA {
        width: 20vw;  
        height: 70vh;	
        background: rgb(50, 50, 50, 0.5); 
        margin-top:  32px; 
        margin-left: 10vw;
    }
    div.playerB {
        width: 20vw;  
        height: 70vh;	
        background: rgb(50, 50, 50, 0.5); 
        margin-top:  32px; 
    }

    div.playerA > img {
        border-radius: 50%; 
        width: 20vh;

        margin-left: 20%;
        margin-top: 120%;

    }

    div.playerB > img {
        border-radius: 50%; 
        width: 20vh;
        margin-left: 20%;
    }

    div.textA {
        width: 20vw;
        height: 10vw;
        background: white; 
        position: absolute;
        top: 0;
        bottom: 0;
        margin: auto;

        color: brown;
    }

    div.textB {
        width: 20vw;
        height: 10vw;
        background:white; 
        position: absolute;
        top: 0;
        bottom: 0;
        margin: auto;
        color: brown;
    } */
</style>